<template>
  <view class="tabs_box">
    <view
    :style="props.styleObj"
      :class="{ act: props.current === index }"
      class="tab_item"
      @tap="handleClick(ele, index)"
      v-for="(ele, index) in props.list"
      :key="index"
    >
      {{ ele.name }}
      <text :class="props.current === index ? 'border acborder' : 'border'"></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const current = ref(0);
const emit = defineEmits(["tabsChange"]);
const props = defineProps({
  list: {
    default: [],
  },
  current: {
    type: Number,
    default: 0,
  },
  styleObj: {
    default: () => {
      return {
        fontSize: "32rpx",
      };
    },
  },
});

function handleClick(ele, index) {
  emit("tabsChange", index);
}
</script>

<style lang="scss">
.tabs_box {
  display: flex;
  width: 90%;
  margin: 10rpx auto 0;
  height: 70rpx;


  .tab_item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    font-size: 32rpx;
    color: #333333;

    .border {
      position: absolute;
      bottom: 0rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 66rpx;
      height: 7rpx;
      background-color: transparent;
      border-radius: 3rpx;
    }

    .acborder {
      background-color: #0d80d7;
    }
  }

  .act {
    color: #0d80d7 !important;
  }
}
</style>
